<template>
  <div class="container-fluid" >
    <div class="row" >
      <div class="col" >
        <breadcrumb v-bind:paths="paths" v-bind:name="name" ></breadcrumb>
      </div>
    </div>
    <div class="row msg" >
      <div class="col-lg-6" >
            <videovue v-bind="{lid: $attrs.lid, question}" ></videovue>
      </div>
      <div class="col-lg-6" >
          <h3>视频编辑</h3>
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane  label="视频问题添加" name="first">
            <videoQuestionvue v-bind="{showdialo, question, deldata, updaleByid}" ></videoQuestionvue>
            </el-tab-pane>
            <el-tab-pane  label="视频剪辑" name="second">
              开发中....
            </el-tab-pane>
        <el-dialog title="添加视频问题" :visible.sync="dialogFormVisible">
            <addquestion  v-bind="{showdialo, dialog, start, lid: $attrs.lid }" ></addquestion>
        </el-dialog>
        <el-dialog title="修改视频问题" :visible.sync="dialogFormVisible1">
            <updatequestion  v-bind="{showdialo:showdialo1, dialog:dialog1, start, form:updateData }"  ></updatequestion>
        </el-dialog>
        </el-tabs>
      </div>
    </div>
  </div>

</template>

<script>
import {
  asyncvideoQuestion,
  asyncdeleteQuestion
} from "../../plugins/api.js";
import videovue from "./video.vue";
import { getLocalTime } from "../../plugins/utils.js";
import ossImglist from "@/components/ossImglist.vue";
import breadcrumb from "@/components/breadcrumb.vue";
import videoQuestionvue from "./videoQuestion.vue";
import addquestion from "./addquestion.vue";
import updatequestion from "./updatequestion.vue"
export default {
  data() {
    return {
      activeName: "first",
      name: "",
      paths: [],
      num1: 0,
      dialogFormVisible: false,
      dialogupdata: false,
      formLabelWidth: "120px",
      imglist: [],
      innerVisible: false,
      question: [],
      dialogFormVisible1: false,
      updateData: null
    };
  },
  async mounted() {
    this.start();
  },
  methods: {
    async start() {
      let lid = this.$attrs.lid;
      let { name, id } = this.$route.query;
      let path = `/coursebyid/${id}`;
      this.paths = [
        {
          name: "查看课程",
          path: "/watchcourse"
        },
        {
          name,
          path
        }
      ];
      this.name =lid
      this.question = await asyncvideoQuestion({ lid: lid });
    },
    showdialo() {
      this.dialogFormVisible = true;
    },
    dialog() {
      this.dialogFormVisible = false;
    },
    showdialo1() {
      this.dialogFormVisible1 = true;
    },
    dialog1() {
      this.dialogFormVisible1 = false;
    },
    getLocalTime(time) {
      return getLocalTime(time);
    },
    async onSubmit() {
      this.$refs["form"].validate(async valid => {
        if (valid) {
          try {
            this.$message({
              message: "恭喜你，修改成功",
              type: "success"
            });
            this.dialogupdata = false;
          } catch (err) {
            this.$message.error("错了哦，修改失败:" + err);
          }
        } else {
          return false;
        }
      });
    },
    async deldata(i) {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(async () => {
          try {
            await asyncdeleteQuestion({ ID: i });
            this.$message({
              message: "恭喜你，删除成功",
              type: "success"
            });
          } catch (err) {
            this.$message.error("错了哦，删除失败:" + err);
          }
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async handleClick(row) {
      console.log(row);
    },
    async updaleByid(index) {
      this.updateData = this.question[index]
      this.dialogFormVisible1 = true
    }
  },
  components: {
    ossImglist,
    breadcrumb,
    videovue,
    videoQuestionvue,
    addquestion,
    updatequestion
  }
};
</script>

<style scoped>
</style>